<template>
  <div>
    <header1 :activeIndex="headIndex"></header1>
    <div id="container" v-loading="loading">
      <div class="content_l">
        <div class="clearfix">
          <div class="fl" id="resume_name">
            <div class="nameShow fl">
              <h1 title="jason的简历">{{this.user.userName}}的简历</h1>
              <span class="rename">重命名</span> |
              <a target="_blank" @click="goPreview()">预览</a>
            </div>
          </div><!--end #resume_name-->
          <div class="fr c5" id="lastChangedTime">最后一次更新：<span> {{makeDate(this.resume.userUpdateTime)}}</span></div>
          <!--end #lastChangedTime-->

          <div class="profile_box" id="basicInfo">
            <h2>基本信息</h2>
            <span class="c_edit" @click="changeResume(1)"></span>
            <div class="basicShow" v-if="!this.resumeUpdateIndex.basic">
            <span><br>姓名：{{this.resume.name}} | 性别：{{this.resume.sex}} | 学历：{{this.resume.maxDegree}} | 工作经验：{{this.resume.workExp}}<br>
              手机号：{{this.resume.telephone}} | 邮箱：{{this.resume.email}}<br>
            </span>
              <div class="m_portrait">
                <img v-if="resume.headerImg" :src="this.$config.url+this.resume.headerImg"
                     class="avatar" style=" width: 100px; height: auto; margin-right: 20px">

                <img v-else width="120" height="120" alt="jason"
                     src="./img/default_headpic.png" style="CURSOR: hand">

              </div>
            </div><!--end .basicShow-->
            <div class="basicEdit" v-if="resumeUpdateIndex.basic">

              <el-form id="profileForm" label-width="100px" class="demo-ruleForm" ref="resume"
                       :model="resume" :rules="rules" label-position="right">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="resume.name"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="sex">
                      <el-radio-group v-model="resume.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker
                          v-model="resume.birthdate"
                          type="date"
                          placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="学历" prop="degree">
                      <el-select v-model="resume.maxDegree" placeholder="最高学历">
                        <el-option label="初中及以下" value="初中及以下"></el-option>
                        <el-option label="高中" value="高中"></el-option>
                        <el-option label="大专" value="大专"></el-option>
                        <el-option label="本科" value="大专"></el-option>
                        <el-option label="研究生" value="研究生"></el-option>
                        <el-option label="博士" value="博士"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="工作经验" prop="region">
                      <el-select v-model="resume.workExp" placeholder="请选择工作经验">
                        <el-option label="在校" value="在校"></el-option>
                        <el-option label="应届生" value="应届生"></el-option>
                        <el-option label="1年以内" value="1年以内"></el-option>
                        <el-option label="1-3年" value="1-3年"></el-option>
                        <el-option label="3-5年" value="3-5年"></el-option>
                        <el-option label="5年之上" value="5年之上"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="电话号码" prop="telephone">
                  <el-input v-model="resume.telephone"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                  <el-input v-model="resume.email"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button  v-if="noResume" type="success" @click="resumeAdd()">立即创建</el-button>
                  <el-button  v-else type="success" @click="resumeUpdate()">立即保存</el-button>
                  <el-button   @click="changeResume(1)">收起</el-button>
                </el-form-item>
              </el-form><!--end #profileForm-->
              <div class="new_portrait">
                <el-upload
                        class="avatar-uploader"
                        :action="this.$config.url+'/resume/headerImg'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        >
                  <img v-if="resume.headerImg" :src="this.$config.url+this.resume.headerImg" class="avatar">
                  <div v-else><img src="./img/default_headpic.png"
                                   style=" width: 120px; height: auto;"></div>
                </el-upload>
                <em>
                  头像大小：小于2M
                </em>
              </div><!--end .new_portrait-->
            </div><!--end .basicEdit-->
          </div><!--end #basicInfo-->

          <div class="profile_box" id="education">
            <h2>教育背景</h2>
            <div class="basicShow" v-if="!resumeUpdateIndex.education">
              <span class="c_edit" @click="changeResume(2)"></span>
              <div v-if="noEducation()" class="educationalAdd pAdd" @click="changeAddResumeIndex()">
                当前暂无教育经历！<br>
                教育背景可以充分体现你的学习和专业能力<br>
                <span>添加教育经历</span>
              </div>
              <div v-if="!noEducation()"><span  v-for="item in educations" :key="item.educationId">
                <span class="c_edit" @click="changeResume(2)"></span>
                 <span>{{dataUtil(item.stattime)}}—{{dataUtil(item.stoptime)}}</span>
                学校：{{item.school}} | 学历：{{item.qualifications}} | 专业：{{item.major}}<br>
              </span></div>

            </div><!--end .教育经理简介-->
            <div class="basicEdit" v-if="resumeUpdateIndex.education">

              <el-button  type="primary" @click="changeAddResumeIndex()" style="margin-left: 50px">新建教育记录</el-button>
              <el-button   type="success" @click="updateEducation()" style="margin-left: 50px">立即保存</el-button>
              <el-button  type="info" @click="changeResume(2)" style="margin-left: 50px">收起</el-button>
              <el-divider></el-divider>
              <el-form id="profileForm" label-width="100px" class="demo-ruleForm" ref="basicResume"
                         :model="educations"  style="margin-left: 0px"
                         v-for="(item,index) in educations" :key="item.educationId">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="学校名称" prop="name">
                        <el-input v-model="item.school"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="专业" prop="name">
                        <el-input v-model="item.major"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item label="学历" prop="degree">
                    <el-select v-model="item.qualifications">
                      <el-option label="初中及以下" value="初中及以下"></el-option>
                      <el-option label="高中" value="高中"></el-option>
                      <el-option label="大专" value="大专"></el-option>
                      <el-option label="本科" value="本科"></el-option>
                      <el-option label="研究生" value="研究生"></el-option>
                      <el-option label="博士" value="博士"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="开始时间" prop="birthday">
                        <el-date-picker
                                v-model="item.stattime"
                                type="date"
                                placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="毕业时间" prop="birthday">
                        <el-date-picker
                                v-model="item.stoptime"
                                type="date"
                                placeholder="选择日期"
                        >
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-form-item label="学院优秀表现" prop="schoolExp">
                      <el-input
                              type="textarea"
                              :autosize="{ minRows: 2, maxRows: 4}"
                              placeholder="请输入内容"
                              v-model="item.schoolExp">
                      </el-input>
                    </el-form-item>
                  </el-row>
                <el-button  type="danger" @click="deleteEducation(index)" style="margin-left: 400px">删除</el-button>
                <el-divider></el-divider>

                </el-form>


            </div>
          </div><!--end #education-->

          <div class="profile_box" id="skill">
            <h2>掌握技能</h2>
            <div class="basicShow" v-if="!resumeUpdateIndex.skill">
              <div v-if="resume.skill==''" class="educationalAdd pAdd" @click="changeResume(3)">
                当前暂无掌握的技能！<br>
                填写技能可以让企业充分了解你的才能！<br>
                <span>添加掌握技能</span>
              </div>
              <div v-if="resume.skill!=''">
                <span class="c_edit" @click="changeResume(3)"></span>
                <span>
                <br>{{this.resume.skill}}<br>
                </span>
              </div>

            </div><!--end .技能简介-->
            <div class="basicEdit" v-if="resumeUpdateIndex.skill">

              <el-button   type="success" @click="resumeUpdate()" style="margin-left: 50px">立即保存</el-button>
              <el-button  type="info" @click="changeResume(3)" style="margin-left: 50px">收起</el-button>
              <el-form :model="resume">
                <el-form-item label="掌握的技能" prop="skill">
                  <el-input
                          type="textarea"
                          :autosize="{ minRows: 8, maxRows: 10}"
                          placeholder="请输入内容"
                          v-model="resume.skill">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div><!--end #basicInfo-->
          <div class="profile_box" id="evaluation">
            <h2>自我评价</h2>
            <div class="basicShow" v-if="!resumeUpdateIndex.evaluation">
              <div v-if="resume.evaluation.length==0" class="educationalAdd pAdd" @click="changeResume(4)">
                当前暂无自我评价！<br>
                填写自我评价可以让企业充分了解你！<br>
                <span>添加自我评价</span>
              </div>
              <div v-else>
                <span class="c_edit" @click="changeResume(4)"></span>
                <span>
                <br>{{this.resume.evaluation}}<br>
                </span>
              </div>

            </div><!--end .技能简介-->
            <div class="basicEdit" v-if="resumeUpdateIndex.evaluation">
              <el-button   type="success" @click="resumeUpdate()" style="margin-left: 50px">立即保存</el-button>
              <el-button  type="info" @click="changeResume(4)" style="margin-left: 50px">收起</el-button>
              <el-form :model="resume">
                <el-form-item label="掌握的技能" prop="skill">
                  <el-input
                          type="textarea"
                          :autosize="{ minRows: 8, maxRows: 10}"
                          placeholder="请输入内容"
                          v-model="resume.evaluation">
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div><!--end #basicInfo-->
        </div>
      </div>
      <div class="content_r">
        <div class="mycenterR" id="myInfo">
          <h2>我的信息</h2>
          <a target="_blank" href="collections.html">我收藏的职位</a>
          <br>
          <a target="_blank" href="subscribe.html">我订阅的职位</a>
        </div><!--end #myInfo-->
      </div>
    </div>
    <!--增加教育经历弹窗-->
    <el-dialog title="增加教育经历" :visible.sync="addResumeIndex">
      <el-form :model="education">
        <el-row>
          <el-col :span="8">
            <el-form-item label="学校名称" prop="name">
              <el-input v-model="education.school" style="width: 170px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="专业" prop="name">
              <el-input v-model="education.major" style="width: 170px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="学历" prop="degree">
              <el-select v-model="education.qualifications">
                <el-option label="初中及以下" value="初中及以下"></el-option>
                <el-option label="高中" value="高中"></el-option>
                <el-option label="大专" value="大专"></el-option>
                <el-option label="本科" value="大专"></el-option>
                <el-option label="研究生" value="研究生"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="birthday">
              <el-date-picker
                      v-model="education.stattime"
                      type="date"
                      placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业时间" prop="birthday">
              <el-date-picker
                      v-model="education.stoptime"
                      type="date"
                      placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="学院优秀表现" prop="schoolExp">
          <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4}"
                  placeholder="请输入内容"
                  v-model="education.schoolExp">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeAddResumeIndex()">取 消</el-button>
        <el-button type="success" @click="addEducation()">确 定</el-button>
      </div>
    </el-dialog>

    <!--弹窗：预览简历-->
    <el-dialog :visible.sync="preview" style="">
      <preview :userId="user.userId"></preview>
    </el-dialog>

  </div>
</template>

<script>
  import header1 from "../header/Header"
  import preview from "../userWork/preview"
  import {makeSimpleDate,makeDate} from "../../common/js/dateformat"
  export default {
    name: "resume",
    components: {
      header1,
      preview
    },
    data() {
      return {
        loading:false,
        preview:false,//预览简历弹窗
        addResumeIndex: false,//增加简历弹窗判断
        noResume:false,//判断是否有简历
        resumeUpdateIndex: {
          basic: false,
          education: false,
          skill: false,
          evaluation:false,
        },
        headIndex: 3,
        user: {},
        resume: {
          resumeId: '',
          userId: '',
          name: "",
          sex: "",
          birthdate: '',
          telephone: "",
          maxDegree: "",
          email: "",
          skill: "",
          evaluation: "",
          resumefile: "",
          userUpdateTime: '',
          headerImg: "",
        },
        educations:[],
        education: {
          userId:'',
          school: '',
          qualifications: '',
          major: '',
          stattime: '',
          stoptime: '',
          schoolExp: '',
        },
        rules:{
          telephone: [
            {  pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/, required: true, message: '请输入正确电话号码', trigger: 'blur' },
          ],
          email: [
            {  pattern: /^([a-zA-Z0-9]+[-_]?)+@[a-zA-Z0-9]+\.[a-z]+$/, required: true, message: '请输入正确邮箱', trigger: 'blur' },
          ],
        },
      }
    },

    created() {
      this.user = this.$store.state.user;
      this.getResume();
      this.resume.userId=this.user.userId;
      this.education.userId=this.user.userId;
    },
    methods: {
      //获得简历
      getResume() {
        this.loading=true;
        this.$ajax.post(this.$config.url + `/resume/selectByUserId/${this.user.userId}`)
            .then(res => {
              if(res.data.message=="null"){
                this.$message.warning("无简历信息，请添加");
                this.noResume=true;
              }else{
                this.resume=res.data.object;
                if(res.data.object.educations!=null){
                  this.educations=res.data.object.educations;
                }
              }
            }).finally(() => {
          this.loading=false;
        })
      },
      //简历更新
      resumeUpdate(){
        this.resume.userId=this.user.userId;
        this.$ajax.post(this.$config.url + `resume/updateResume`,this.resume)
            .then(res => {
              if(res.data=="succ"){
                this.$message.success("更新成功");
                //刷新简历
                this.getResume();
              }else if(res.data=="error"){
                this.$message.error("更新失败");
              }
            }).finally(() => {
        })
      },
      //改变表单状态
      changeResume(formName){
        if(formName==1){
         this.resumeUpdateIndex.basic=!this.resumeUpdateIndex.basic
        }else if(formName==2){
          this.resumeUpdateIndex.education=!this.resumeUpdateIndex.education
        }else if(formName==3){
          this.resumeUpdateIndex.skill=!this.resumeUpdateIndex.skill
        }else if(formName==4){
          this.resumeUpdateIndex.evaluation=!this.resumeUpdateIndex.evaluation
        }
      },
      //弹出/消失简历增加
      changeAddResumeIndex(){
        this.addResumeIndex=!this.addResumeIndex;
      },
      //日期帮助类
      dataUtil(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },

      //增加基本信息
      resumeAdd(){
        this.$ajax.post(this.$config.url + `/resume/addResume`,this.resume)
            .then(res => {
              if(res.data=="succ"){
                this.$message.success("增加成功");
                //刷新简历
                this.getResume();
                //
                this.noResume=true;
              }else if(res.data=="error"){
                this.$message.error("增加失败");
              }
            }).finally(() => {
        })
      },
      //增加教育经历
      addEducation(){
        this.$ajax.post(this.$config.url + `/bs_recruit/education/addEducation/`,this.education)
            .then(res => {
              if(res.data=="succ"){
                this.$message.success("增加成功");
                //刷新简历
                this.getResume();
                //关闭弹窗
                this.changeAddResumeIndex();
              }else if(res.data=="error"){
                this.$message.error("增加失败");
              }
            }).finally(() => {
        })
      },
      //修改教育经历
      updateEducation(){
        {
          this.$confirm('此操作将永久改变教育信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$ajax.post(this.$config.url + `/bs_recruit/education/updateEducations/`,this.educations)
                .then(res => {
                  if(res.data=="succ"){
                    this.$message.success("修改成功");
                    this.$message({
                      type: 'success',
                      message: '保存成功!'
                    });
                    //刷新简历
                    this.$router.push("/resume")
                  }else if(res.data=="error"){
                    this.$message.error("增加失败");
                  }
                }).finally(() => {
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消保存'
            });
          });
        }
      },
      //删除教育经历
      deleteEducation(index){
        this.educations.splice(index,1);
      },
      //上传成功回调
      handleAvatarSuccess(res) {
        this.resume.headerImg =res;
      },
      //判断无教育经历
      noEducation(){
        var result=true;
        if(this.educations.length!==0){
          result=false
          console.log("有教育经历");
        }
        console.log("无教育经历");
        return result;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isGIF = file.type === 'image/gif';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG && !isGIF) {
          this.$message.error('上传头像图片只能是 JPG 或PNG或gif格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
      },
      goPreview(){
        this.preview=!this.preview;
      }
    },
    filters :{

    }

  }
</script>

<style scoped>
  .fl {
    float: left !important;
  }

  .c_edit{ width:25px; height:25px; position:absolute; right:7px; top:7px;z-index:10; background:url(img/c_edit.png) 0 1px no-repeat;}
  .c_edit:hover{ background-position:-30px 0px;}
  .resume div.clearfix {
    margin: 0;
    width: 100%;
  }
  .basicEdit{padding:30px 38px 60px 38px;background:#fafafa;overflow:hidden}
  .basicEdit h1{font-size:20px;line-height:44px;border-bottom:1px solid #e5e5e5;margin:0 0 30px 0}
  .basicEdit .new_portrait{float:left;margin:10px 0 0 43px;width:120px;height:180px;position:relative}
  #profileForm{width:450px;float:left;margin:10px 0;}
  #profileForm table{border-spacing:0;border-collapse:collapse}
  #profileForm table td{padding:0 0 17px 0;vertical-align: top;}
  .redstar{color:#fe6161;padding:0 5px;margin:15px 0 0 10px;display:block;}
  #profileForm .redstar{margin:15px 0 0 5px;}
  #profileForm input{margin:0;font:18px/32px "微软雅黑","宋体",Arial;margin-right:9px;}
  #profileForm input[type="text"]:focus{border:2px solid #c8e6de}
  #profileForm input[type="text"]{width:166px}
  #profileForm input[name="tel"],#profileForm input[name="email"]{width:386px}
  .resume div.clearfix a {
    margin: 0 6px;
  }
  #resume_name {
    margin-bottom: 10px;
    position: relative;
  }
  #resume_name .nameShow h1 {
    font-size: 18px;
    margin: 0 10px 0 0;
    float: left;
    line-height: normal;
  }
  #resume_name .nameEdit {
    height: 24px;
    width: 180px;
    font-size: 18px;
    padding: 3px;
    margin: 0;
    line-height: normal;
    margin-right: 10px;
  }
  #resume_name input[type="submit"] {
    background: none;
    color: #019875;
    padding: 0 5px;
  }
  #resume_name a, #resume_name span {
    color: #019875;
    padding: 0 5px;
    cursor: pointer;
  }
  #resume_name span.error {
    color: #555;
    padding-left: 20px;
  }
  #container {
    width: 1024px;
    margin-top: 35px;
    margin-left: 250px;
    padding-bottom: 100px;

  }
  .profile_box {
    clear: both;
    background: #fafafa;
    border: 2px solid #fafafa;
    word-wrap: break-word;
    padding: 18px;
    margin-bottom: 20px;
    position: relative;
  }
  .profile_box td {
    vertical-align: top;
  }
  .profile_box span.error {
    margin: 3px 0 0 0;
  }
  .profile_box h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px 0;
    background: url('./img/profile_square.png') 0 3px no-repeat;
    padding-left: 20px;
  }
  .profile_box h2 span {
    color: #777;
  }
  .profile_box .c_add {
    right: 7px;
    top: 7px;
  }
  .profile_box .pAdd {
    min-height: 76px;
    cursor: pointer;
    background: url('./img/profile_add.png') 20px 0 no-repeat;
    padding: 0px 0 0 140px;
  }
  .profile_box .pAdd:hover {
    background-position: 20px -76px;
  }
  .profile_box .pAdd span {
    display: block;
    font-size: 16px;
    color: #0d9572;
    text-decoration: underline;
    margin-top: 5px;
  }
  .profile_box td {
    padding: 8px 0 8px 20px;
  }
  #basicInfo {
    min-height: 116px;
  }
  #basicInfo .basicEdit {
    overflow: hidden;
    padding: 0;
  }
  #basicInfo .basicShow {
    font-size: 16px;
    padding: 0 130px 0 20px;
    line-height: 28px;
    position: relative;
  }
  #basicInfo .basicShow span.nofill {
    color: #e46a4a;
  }
  #basicInfo .basicShow .m_portrait {
    position: absolute;
    right: 0;
    top: -35px;
  }
  .content_r {
    float: left;
    width: 280px;
    margin-left: 64px;
  }
  .content_r .eventAd {
    display: block;
    margin: 20px 0;
  }
  .mycenterR {
    background: #fafafa;
    padding: 15px 20px;
    margin-bottom: 8px
  }
  .mycenterR h2 {
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 8px 0
  }
  .mycenterR h2 a, .mycenterR h2 span {
    cursor: pointer;
    font-size: 14px;
    line-height: 26px;
    float: right;
    color: #019875;
    text-decoration: none;
    *margin-top: -25px;
  }
  .mycenterR h2 a:hover, .mycenterR h2 span:hover {
    color: #019875
  }
  .mycenterR h2 i {
    font-size: 14px;
    font-style: normal;
    float: right;
    *margin-top: -20px;
  }
  .mycenterR a {
    color: #333;
    text-decoration: underline
  }
  .mycenterR a.btn_profile_cancel {
    text-decoration: none
  }
  .mycenterR a:hover {
    color: #019875
  }
  .mycenterR .resumeUploadDiv a.fr {
    color: #019875;
    text-decoration: none;
  }
  .mycenterR .resumeUploadDiv a.fr:hover {
    text-decoration: underline;
  }
  .content_l {
    float: left;
    width: 680px;
  }
  .content_l h1 {
    font-weight: normal;
    line-height: 42px;
    margin: 0 0 20px 0;
  }
  .portrait_upload{width:120px; height:120px; background:#e7e7e7 ; position:absolute; z-index:1;}
  .portrait_upload span{ float:right; border:1px solid #d6d6d6; background:#fff; margin:90px 10px 0 0;}
  .portraitShow{position:absolute;z-index:1; width:120px; height:120px;background:none;}
  .portraitShow span{position:absolute;left:0;bottom:0; height:30px;width:120px;display:block;background:#000;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;color:#fff; text-align:center; line-height:30px;}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .educationalForm .profile_select_139{margin-right:9px;*margin-right:6px;}
  .experienceForm,.educationalForm{padding-top:10px}
  .experienceForm td,.educationalForm td,.workForm td{padding:0 0 17px 0 !important}
  .experienceForm input,.educationalForm input{margin:0}
  .experienceForm input[type="text"]:focus,.educationalForm input[type="text"]:focus{border:2px solid #c8e6de}
  .experienceForm input[type="text"],.educationalForm input[type="text"],.projectForm input[type="text"]{width:264px}
  .educationalForm input[type="text"]{margin-right:7px}
  .experienceForm .redstar,.educationalForm .redstar,.projectForm .redstar{margin:15px 0 0 0;}
</style>